<style lang="scss" scoped>
::v-deep .el-radio {
  display: block;
  margin: 10px 0;
}
.remark {
  color: rgb(37, 137, 255);
  cursor: pointer;
  text-decoration: underline;
  font-weight: bold;
  margin: 17px 0;
  font-size: 16px;
}
.el-radio ::v-deep .el-radio__label {
  font-size: 16px;
  line-height: 2;
}
.el-radio ::v-deep .el-radio__inner {
  width: 15px;
  height: 15px;
  // margin-bottom: 5px;
}
</style>

<template>
  <el-form :model="form" ref="form" size="large">
    <!-- <el-row :inline="true"> -->
    <!-- <el-form-item label="分货比例模式" prop="orderDistributionRatio">
        
        <el-input
          v-model="form.orderDistributionRatio"
          placeholder="请输入分货比例模式"
        />
        ALLOCATION_BY_CHANNEL_RATIO
CUSTOM_RATIO_ALLOCATION
CUSTOM_QUANTITY_ALLOCATION
RECENT_SALES_RATIO_ALLOCATION
按渠道采购比例分货
自定义比例分货
自定义数量分货
近期销售占比分货
      </el-form-item> -->
    <!-- <el-form-item label="分货比例模式" prop="orderDistributionRatio"> -->
    <el-row style="margin: 15px 0">
      <el-col :span="8">
        <el-radio-group
          v-model="form.orderDistributionRatio"
          size="small"
          type="vertical"
        >
          <el-radio :label="'ALLOCATION_BY_CHANNEL_RATIO'"
            >按渠道采购比例分货</el-radio
          >
          <el-radio :label="'CUSTOM_RATIO_ALLOCATION'"
            >自定义比例分货<el-button
              style="margin-left: 5px"
              type="primary"
              plain
              size="mini"
              @click="opentagkey('ratio')"
              >设置比例</el-button
            ></el-radio
          >
          <el-radio :label="'CUSTOM_QUANTITY_ALLOCATION'"
            >自定义数量分货<el-button
              style="margin-left: 5px"
              type="primary"
              plain
              size="mini"
              @click="opentagkey('quantity')"
              >设置数量</el-button
            ></el-radio
          >
          <el-radio :label="'RECENT_SALES_RATIO_ALLOCATION'"
            >近期销售占比分货
            <el-date-picker
              @change="changeDate"
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              size="mini"
            >
            </el-date-picker
          ></el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="12">
        <div class="remark">说明：按渠道采购订单需求比例进行该次分货</div>
        <div class="remark">说明：可自定义按不同分货比例进行该次分货</div>
        <div class="remark">
          说明：（仅适用按商品分货）可自定义设置分货数量进行该次分货
        </div>
        <div class="remark">说明：根据设置日期范围内的销售占比进行该次分货</div>
      </el-col>
    </el-row>
    <!-- </el-form-item> -->
    <!-- <el-form-item label="方案编码" prop="strategyCode">
        <el-input v-model="form.strategyCode" placeholder="请输入方案编码" />
      </el-form-item>
      <el-form-item label="方案名称" prop="strategyName">
        <el-input v-model="form.strategyName" placeholder="请输入方案名称" />
      </el-form-item>
      <el-form-item label="优先级" prop="priorityLevel">
        <el-input v-model="form.priorityLevel" placeholder="请输入优先级" />
      </el-form-item>
      <el-form-item label="配货来源" prop="allocationSource">
        <el-input
          v-model="form.allocationSource"
          placeholder="请输入配货来源"
        />
      </el-form-item>
      <el-form-item label="品牌" prop="brand">
        <el-input v-model="form.brand" placeholder="请输入品牌" />
      </el-form-item>
      <el-form-item label="生效开始日期" prop="effectiveStartDate">
        <el-date-picker
          clearable
          v-model="form.effectiveStartDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择生效开始日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="生效结束日期" prop="effectiveEndDate">
        <el-date-picker
          clearable
          v-model="form.effectiveEndDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择生效结束日期"
        >
        </el-date-picker>
      </el-form-item> -->
    <!-- </el-row> -->
    <el-form-item style="width: 100%; text-align: center">
      <!-- <el-button @click="submitnote('noticForm')" type="primary"
        >笔记合作</el-button
      > -->
      <el-button style="margin-top: 12px" @click="prev">上一步</el-button>
      <el-button style="margin-top: 12px" @click="next">下一步</el-button>
      <el-button style="margin-top: 12px" @click="submitForm"
        >保存草稿</el-button
      >
      <!-- <el-button @click="resetForm" style="margin-left: 10px"
        >一键清空</el-button
      > -->
    </el-form-item>

    <el-dialog
      :visible.sync="tagkeyVisible"
      width="500px"
      append-to-body
      v-if="tagkeyVisible"
    >
      <div class="el-dialog-div">
        <el-form :model="formData" :inline="true">
          <el-form-item style="width: 200px" label="店铺名称"></el-form-item>
          <el-form-item
            v-if="businessType == 'ratio'"
            style="width: 100px"
            label="比例"
          ></el-form-item>
          <el-form-item
            v-if="businessType == 'quantity'"
            style="width: 100px"
            label="数量"
          ></el-form-item>
          <el-form-item
            v-for="(item, index) in formData.libraryIdList"
            :key="index"
          >
            <!-- <el-input
              style="width: 150px"
              v-model="item.storeName"
              placeholder="店铺名称"
            ></el-input> -->
            <el-select
              v-model="item.storeName"
              clearable
              filterable
              placeholder="店铺"
              style="width: 200px"
            >
              <el-option
                v-for="item in ShopInfoList"
                :key="item.comment"
                :label="`${item.comment}`"
                :value="item.comment"
              >
              </el-option>
            </el-select>
            <!-- <el-input
              style="width: 150px"
              v-model="item.field_name"
              placeholder="请输入字段值"
            ></el-input> -->
            <el-input
              v-if="businessType == 'ratio'"
              style="width: 100px"
              v-model="item.storeItemDistributionRatio"
              placeholder="比例"
            ></el-input>
            <el-input
              v-if="businessType == 'quantity'"
              style="width: 100px"
              v-model="item.storeItemQuantity"
              placeholder="数量"
            ></el-input>
            <span v-if="businessType == 'ratio'">%</span>

            <span
              v-if="formData.libraryIdList.length > 0"
              style="margin-left: 5px"
            >
              <el-button type="primary" size="mini" @click="addLibraryIdList"
                >新增</el-button
              >
              <el-button type="danger" size="mini" @click="delRow(item, index)"
                >删除</el-button
              >
            </span>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitformData">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </el-form>
</template>
<script>
import {
  listStrategy,
  getStrategy,
  delStrategy,
  addStrategy,
  updateStrategy,
} from "@/api/productAllocation/strategy";
import { JstShopInfo } from "@/api/conf/BiStoreWarehouseBinding";
import {
  listShop,
  getShop,
  delShop,
  addShop,
  updateShop,
  updateByStrategyCode,
} from "@/api/productAllocation/shop";
export default {
  props: {
    row: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      businessType: "",
      tagkeyVisible: false,
      formData: {
        libraryIdList: [],
      },

      ShopInfoList: [],
      value1: [],
      // 表单参数
      form: {},
    };
  },
  watch: {
    row: {
      handler: function (newnew, oldold) {
        console.log("newnew", newnew);
        if (newnew) {
          this.form = newnew;
          if (!this.form.orderDistributionRatio) {
            this.form.orderDistributionRatio = "ALLOCATION_BY_CHANNEL_RATIO";
          }

          // this.form.id=newnew
          // this.value1 = [
          //   this.form.distributionRatioStartDate,
          //   this.form.distributionRatioEndDate,
          // ];
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    JstShopInfo({ pageNum: 1, pageSize: 100 }).then((response) => {
      this.ShopInfoList = response.rows.map((item) => ({
        columnName: item.shopId,
        comment: item.shopName,
      }));
    });
  },
  methods: {
    submitformData() {
      // if (!this.formData.libraryIdList[0].storeName) {
      //   this.$modal.msgError("至少输入一个店铺");
      //   return;
      // }
      // if (!this.formData.libraryIdList[0].storeItemDistributionRatio) {
      //   this.$modal.msgError("请设置优先级");
      //   return;
      // }
      let obj = {
        strategyCode: this.row.strategyCode,
        businessType: this.businessType,
        allocationPurchaseConfShopList: this.formData.libraryIdList,
      };
      updateByStrategyCode(obj).then((response) => {
        if (response.code == 200) {
          this.$modal.msgSuccess("设置成功");
          this.tagkeyVisible = false;
        } else {
          this.$modal.msgError("设置失败");
          this.tagkeyVisible = false;
        }
      });
    },
    opentagkey(businessType) {
      this.businessType = businessType;
      let obj = {};
      if (businessType == "ratio") {
        obj = {
          strategyCode: this.row.strategyCode,
          businessType: "ratio",
        };
      } else if (businessType == "quantity") {
        obj = {
          strategyCode: this.row.strategyCode,
          businessType: "quantity",
        };
      }
      listShop(obj).then((response) => {
        let list = [];
        if (businessType == "ratio") {
          list = [{ storeName: "", storeItemDistributionRatio: "" }];
        } else if (businessType == "quantity") {
          list = [{ storeName: "", storeItemQuantity: "" }];
        }
        if (response.rows.length > 0) {
          list = [];
          response.rows.forEach((item) => {
            if (businessType == "ratio") {
              list.push({
                storeName: item.storeName,
                storeItemDistributionRatio: item.storeItemDistributionRatio,
              });
            } else if (businessType == "quantity") {
              list.push({
                storeName: item.storeName,
                storeItemQuantity: item.storeItemQuantity,
              });
            }
          });
        }
        // this.cols
        this.formData.libraryIdList = list;
      });

      this.tagkeyVisible = true;
    },
    // 取消按钮
    cancel() {
      this.tagkeyVisible = false;
    },
    //添加库存名称
    addLibraryIdList() {
      if (this.businessType == "ratio") {
        this.formData.libraryIdList.push({
          storeName: "",
          storeItemDistributionRatio: "",
        });
      } else if (this.businessType == "quantity") {
        this.formData.libraryIdList.push({
          storeName: "",
          storeItemQuantity: "",
        });
      }
    },
    //库存名称删除
    delRow(item, index) {
      if (this.formData.libraryIdList.length > 0) {
        this.formData.libraryIdList.splice(index, 1);
      } else {
        this.$message.warning("至少选择一项");
      }
    },
    changeDate() {
      this.form.distributionRatioStartDate = this.value1[0];
      this.form.distributionRatioEndDate = this.value1[1];
    },
    prev() {
      this.updateForm();
      this.$emit("prev");
    },
    next() {
      this.updateForm();
      this.$emit("next");
    },
    /** 提交按钮 */
    updateForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateStrategy(this.form).then((response) => {
              // this.$modal.msgSuccess("修改成功");
              //   this.open = false;
              //   this.getList();
            });
          } else {
            addStrategy(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              //   this.open = false;
              //   this.getList();
            });
          }
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateStrategy(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              // this.open = false;
              // this.getList();
            });
          } else {
            addStrategy(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              // this.open = false;
              // this.getList();
            });
          }
        }
      });
    },
  },
};
</script>
